<template>
  <div class="container">
    <div>
      <div>
        <el-form ref="dataForm" :model="record" :rules="recordRules" label-position="top" size="small"  label-width="110px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="流程分类" prop="bizCateName">
                <el-input v-model="record.bizCateName" placeholder="流程分类"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上级流程分类" prop="bizCateParentName">
                <el-input v-model="record.bizCateParentName" placeholder="" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col>
              <el-form-item label="备注" prop="bizCateDesc">
                <el-input type="textarea"  v-model="record.bizCateDesc" placeholder="备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="menu-navbar">
        <el-button size="small" type="" @click="closePage">关闭</el-button>
        <el-button v-if="detailDialog.editType == 'add'" size="small" type="success" @click="createSave('dataForm')">保存</el-button>
        <el-button v-if="detailDialog.editType == 'edit'" size="small" type="success" @click="createUpdate('dataForm')">更新</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'wfBizCategoryDetail',
    data() {
      return {
        record: {
          bizCateId: '',
          bizCateParentId: '',
          bizCateParentName: '',
          bizCateName: '',
          bizCateDesc: ''
        },
        recordRules: {
          bizCateName: [
            { message: '流程分类不能为空', required: true, trigger: 'blur' },
            { min: 1, max: 64, message: '最大长度为 64 个字符', trigger: 'blur' }
          ],
          bizCateDesc: [
            { min: 0, max: 128, message: '最大长度为 128 个字符', trigger: 'blur' }
          ]
        },
        optType: '' // 操作类型
      }
    },
    props: ['dialogRefreshProp', 'detailDialog'],
    created() {
      this.initPage()
    },
    watch: {
      dialogRefreshProp() { // 普通的watch监听通的watch监听
        this.initPage()
      }
    },
    methods: {
      initPage() {
        this.optType = this.detailDialog.editType
        this.record.bizCateId = ''
        this.record.bizCateParentId = ''
        this.record.bizCateParentName = ''
        this.record.bizCateName = ''
        this.record.bizCateDesc = ''
        this.fetchData()
      },
      fetchData() {
        if (this.$refs['dataForm']) {
          this.$refs['dataForm'].clearValidate()
        }
        if (this.optType === 'add') {
          this.record.status = '0'
          this.record.sort = '01'
          this.record.bizCateParentId = this.detailDialog.record.parentId
          this.record.bizCateParentName = this.detailDialog.record.parentName
        } else if (this.optType === 'edit') {
          //
          let queryArgs = {
            condition: [
              {
                property: 'bizCateId',
                value: '',
                type: 'EQ'
              }
            ]
          }
          queryArgs.condition[0].value = this.detailDialog.record.id
          this.$store.dispatch('WfBizCategorySelect', queryArgs).then(res => {
            this.loading = false
            this.record = res.data.records[0]
            this.record.bizCateParentName = this.detailDialog.record.parentName
          }).catch((err) => {
            console.log(err)
          })
        }
      },
      createSave(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.saveRecord()
          } else {
            this.$message({
              type: 'danger',
              message: '添加失败!'
            })
            console.log('error save!!')
            return false
          }
        })
      },
      createUpdate(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.updateRecord()
          } else {
            this.$message({
              type: 'danger',
              message: '更新失败!'
            })
            console.log('error update!!')
            return false
          }
        })
      },
      saveRecord() {
        this.$store.dispatch('WfBizCategoryInsert', this.record).then(res => {
          this.$emit('treeRefresh')
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
        }).catch((err) => {
          console.log(err)
        })
      },
      updateRecord() {
        this.$store.dispatch('WfBizCategoryUpdateById', this.record).then(res => {
          this.$emit('treeRefresh')
          this.$message({
            type: 'success',
            message: '更新成功!'
          })
        }).catch((err) => {
          console.log(err)
        })
      },
      closePage() {
        this.$emit('setDialogDisplay')
      }
    }
  }
</script>
<style scoped>
  .menu-navbar{
    padding:0 0 20px;
    text-align: right;
  }
  .container{
    padding: 0 10px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>
